<template>
  <view class="com-b-page">
    <view class="header">
      <text>组件B独立页面</text>
    </view>
    
    <view class="content">
      
      <view class="received-data">
        <text>收到组件A的数据：</text>
        <text class="data-display">{{ receivedData }}</text>
      </view>
      
      <view class="input-section">
        <text>回传数据：</text>
        <input v-model="callbackValue" placeholder="输入回传数据" />
        <button @click="sendBackToParent" size="mini">回传到首页</button>
      </view>
      
      <button @click="goBack" size="mini">返回首页</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      receivedData: '',
      callbackValue: '0595-2788888'
    }
  },
  onLoad() {
    console.log('组件B页面加载')
    // 监听组件A发送的数据
    uni.$on('pageComAToComB', this.handleComAData)
  },
  onUnload() {
    // 页面卸载时移除监听
    uni.$off('pageComAToComB', this.handleComAData)
  },
  methods: {
    handleComAData(data) {
      console.log('收到组件A页面数据：', data)
      this.receivedData = JSON.stringify(data)
      uni.showToast({
        title: '收到组件A数据',
        icon: 'success'
      })
    },
    sendBackToParent() {
      // 使用全局事件通信回传到首页
      uni.$emit('comBPageToHome', this.callbackValue)
      uni.showToast({
        title: '数据已回传',
        icon: 'success'
      })
      uni.navigateBack()
    },
    goBack() {
      uni.navigateBack()
    }
  }
}
</script>

<style>
.com-b-page {
  padding: 30rpx;
}

.header {
  font-size: 36rpx;
  font-weight: bold;
  text-align: center;
  margin-bottom: 30rpx;
}

.content {
  padding: 20rpx;
}

.received-data {
  margin: 20rpx 0;
  padding: 15rpx;
  background-color: #f0fff0;
  border-radius: 8rpx;
}

.data-display {
  color: #ff6b6b;
  font-weight: bold;
}

.input-section {
  margin: 25rpx 0;
  padding: 15rpx;
  background-color: #f8f9fa;
  border-radius: 8rpx;
}

.input-section input {
  border: 1px solid #ddd;
  padding: 10rpx;
  margin: 10rpx 0;
  border-radius: 5rpx;
}
</style>